<script setup lang="ts">
  import { PropType, watch, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance, ElOption, ElSelect } from "element-plus";
  import permission from "@/components/permission.vue";
  import SelectBase from "@/components/SelectBase.vue";
  const
    props = defineProps({
      modelValue: { type: Object as PropType<gt.sql.group>, default() { return format.def.group; }, },
      disabled: { type: Boolean, default: false }
    }),
    rules = ref({
      name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, }
    }),
    data = ref([{ id: "0", name: "总店" }, { id: "1", name: "商家" }, { id: "2", name: "消费者" }]),
    entity = ref<FormInstance>();
  async function init() {
  }
  watch(() => props, init, { deep: true, immediate: true });
  defineExpose({
    validate() {
      return new Promise<boolean>((resolve) => {
        if (entity.value) {
          entity.value.validate().then(resolve).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="group xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <ElFormItem label="创建时间" prop="createTime">
      <el-input :modelValue="modelValue.createTime ? modelValue._createTime : '系统自动生成'" disabled />
    </ElFormItem>
    <ElFormItem label="上级id" prop="pid">
      <!-- <el-cascader v-model="modelValue.pid" :options="data" :props="opt" :disabled="disabled" clearable
        collapse-tags-tooltip placeholder="请选择上级" @change="changePid" /> -->
      <el-select v-model="modelValue.pid" placeholder="请选择上级">
        <ElOption v-for="i in data" :key="i.id" :label="i.name" :value="i.id" />
      </el-select>
    </ElFormItem>
    <ElFormItem label="状态" prop="state">
      <el-switch v-model="modelValue.state" :disabled="disabled" :active-value="0" :inactive-value="1" />
    </ElFormItem>
    <template v-if="modelValue.pid == '1'">
      <ElFormItem label="店主" prop="create">
        <!-- <el-input :modelValue="modelValue._create?.name" disabled /> -->
        <SelectBase v-model="modelValue.create" :disabled="disabled" type="user" placeholder="请选择店主" />
      </ElFormItem>
      <ElFormItem label="店铺分成" prop="commission">
        <el-input-number v-model="modelValue.commission" :disabled="disabled" :min="0" :max="100" />
      </ElFormItem>
      <ElFormItem label="业务员" prop="sid">
        <SelectBase v-model="modelValue.sid" :disabled="disabled" type="user" placeholder="请选择业务员" />
      </ElFormItem>
      <ElFormItem label="业务员分成" prop="salesman">
        <el-input-number v-model="modelValue.salesman" :disabled="disabled" :min="0" :max="100" />
      </ElFormItem>
    </template>
    <ElFormItem class="wf" label="名称" prop="name"><el-input v-model="modelValue.name" placeholder="请输入名称"
        :disabled="disabled" />
    </ElFormItem>
    <ElFormItem class="wf" label="权限模板" prop="permission">
      <permission v-model="modelValue.permission" :disabled="disabled" />
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
  .group {
    position: relative;
    >:not(.wf) {
      width: 49%;
    }
  }
</style>